import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Footer extends Component {
    static propTypes = {
        list: PropTypes.array.isRequired,
        changeAllStatus: PropTypes.func.isRequired,
        deleteAllDone: PropTypes.func.isRequired
    }
    changeAllStatus = (e) => {
        this.props.changeAllStatus(e.currentTarget.checked);
    }
    deleteAllDone = () => {
        this.props.deleteAllDone();
    }
    render() {
        const dones = this.props.list.filter(item => item.done == true).length;
        const totals = this.props.list.length;
        return (
            <div className='footer-wrapper'>
                <input type='checkbox' onChange={this.changeAllStatus} checked={totals > 0 && dones == totals} className='form-control' />
                已完成 {dones} / 全部 {totals}
                <button onClick={this.deleteAllDone}>清除已完成</button>
            </div>
        )
    }
}
